<template>
    <div class="info_page">
    	<carousel :responsive="100" :indicators="true" :auto="3000">
            <div v-if='goodsImgs'>
                <div v-for="img in goodsImgs">
                    <img :src="img ? img : defaultImg">   
                </div>
            </div>
            <div v-else>
                <img :src="defaultImg">
            </div>
        </carousel>
        <div class="contain">
            <div v-if="good.cooperation==1">
            	<h2 class="name ellipsis">{{good.goodsName}}</h2>
                <div class="info_price clear">批发价￥<span class="money">{{rangeMoney}}</span></div>
	            <div class="info_price info_buy clear" >
                    <div class="left">已采购：<span>{{num}}{{good.splitingUnit}}</span></div>
	                <div class="right">采购数量：<span>{{currentNum}}</span></div>
	            </div>
	            <multi-spec :item="good" @addCart="addCart" @minusCart="minusCart"></multi-spec>
            </div>

            <!-- 未建立关系时显示↓  -->
            <div v-else>
            	<h2 class="name ellipsis">{{good.goodsName}}</h2>
	            <div class="info_price clear" >
	                批发价￥***
	            </div>
            	<div class="info_price no_relation">
	                <h2>您尚未与该供应商建立合作关系</h2>
	                <div class="box clear">
	                    <div @click="toTel" class="left"><img src="../../images/info_icon1.png" alt="">联系销售代表</div>
	                    <div class="right" @click="toCategoryGoods"><img src="../../images/info_icon2.png" alt="">查找同类商品</div>
	                </div>
	            </div>
            </div>

        </div>

        <div class="goods_commodity">
            <div class="title"><h2>商品信息</h2><hr></div>
            <div class="contain">
                <p>分类：{{good.categoryName}}</p>
                <p>品牌：{{good.brandName}}</p>
                <p>供应商：{{good.mechanismName}}</p>
                <div v-if="good.splitUnitFlag==0">
                    <p v-if="good.cooperation==1">建议零售价：￥{{rangePrice}} / {{good.splitingUnit}}</p>
                    <p v-else>建议零售价：￥*** / {{good.splitingUnit}}</p>
                </div>
                <div v-else>
                    <p v-if="good.cooperation==1">建议零售价：￥{{rangePrice}} / {{good.splitedUnit}}</p>
                    <p v-else>建议零售价：￥*** / {{good.splitedUnit}}</p>
                </div>
                <p>保质期：{{qualityPeriod}}</p>
            </div>
        </div>
        <div class="goods_commodity">
            <div class="title"><h2>图文详情</h2><hr></div>
            <img v-for="img in goodsDetails" :src="img">   
        </div>
    	<hover-cart></hover-cart>
        <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>

        <transition name="loading">
            <loading v-if="showLoading"></loading>
        </transition>
    </div>
</template>

<script>
    import {mapState,mapMutations} from 'vuex'
    import headTop from 'src/components/header/head'
    import {getGoodsDetails} from 'src/service/getData'
    import {imgBaseUrl, defaultImg} from 'src/config/env'
    import Carousel from 'vue-m-carousel'
    import multiSpec from 'src/components/common/multiSpec'
    import hoverCart from 'src/components/common/hoverCart'
    import loading from 'src/components/common/loading'
    import alertTip from 'src/components/common/alertTip'

    export default {
        data(){
            return{
                goodsId:0,//商品id
                promotionId:0, //活动id
                good:[],//商品信息
                specifications:[],//规格信息
                goodsDetails:[1,],//图片详情
         		goodsImgs:[1,],//头部图片
         		imgBaseUrl,
         		price:0,//建议零售价
         		referencePrice:0,//规格参考价格（阶梯价第一个价格）
         		num:0,//已采购数量
         		qualityPeriod:0,//保质期
         		rangePrice:[],//零售价区间
         		rangeMoney:[],//批发价区间
         		currentNum:0,//当前采购数量
                defaultImg,
                showLoading: true, //显示加载动画
                alertText: '',
                showAlert: false,
            }
        },
        mounted(){
            document.body.scrollTop = 0;
            this.loadData();
        },
        components: {
            headTop,
            Carousel,
            multiSpec,
            hoverCart,
            loading,
            alertTip,
        },
        computed: {
            ...mapState([
                'userInfo','cartList',
            ]),
            /**
             * 监听cartList变化，更新当前用户的购物车信息userCart，同时返回一个新的对象
             */
            userCart: function (){
                return Object.assign({},this.cartList[this.userInfo.id]);
            },
        },
        methods: {
            ...mapMutations([
                'ADD_CART','REDUCE_CART'
            ]),
            async loadData() {
                this.goodsId = this.$route.query.goodsId;
                this.promotionId=this.$route.query.promotionId;
                let response = await getGoodsDetails(this.userInfo.token, this.goodsId, this.promotionId );
                this.good = response.data;
                this.currentNum = this.foodNum(this.good);
                this.goodsImgs = this.good.goodsImgs;//头部图片
                this.goodsDetails = this.good.goodsDetails;//商品详情图片
                this.specifications = this.good.specifications;//规格信息
                this.price = this.specifications[0].currentPrice;//指定第一个规格的建议零售价为默认建议零售价
                this.referencePrice = this.specifications[0].pricePangeList[0].price;//指定第一个规格的第一个阶梯价为默认批发价
                this.qualityPeriod = this.specifications[0].qualityPeriod;//指定第一个规格的保质期为默认保质期
                //计算已采购总数,取出建议零售价最小值和最大值,取出批发价最小值和最大值。
                let minPrice = 0;//零售价最小值
                let maxPrice = 0;//零售价最大值
                let minMoney = 0;//批发价最小值
                let maxMoney = 0;//批发价最大值
                for (var i = 0; i <= this.specifications.length - 1; i++) {
                	
                	this.num +=this.specifications[i].allSaled;
                	if(minPrice==0&&maxPrice==0){
                		//初始化零售价最小值
	                	minPrice = this.specifications[i].currentPrice;
	                	//初始化零售价最大值
	                	maxPrice = this.specifications[i].currentPrice;
                	}
                	if(this.specifications[i].currentPrice<minPrice){
                		minPrice = this.specifications[i].currentPrice;
                	}
                	if(this.specifications[i].currentPrice>maxPrice){
                		maxPrice = this.specifications[i].currentPrice;
                	}
                	
                	for (var j = 0; j <= this.specifications[i].pricePangeList.length - 1; j++) {
                		if(minMoney==0&&maxMoney==0){
                			//初始化批发价最小值
                			minMoney = this.specifications[i].pricePangeList[j].price;
                			//初始化批发价最大值
                			maxMoney = this.specifications[i].pricePangeList[j].price;
                		}
                		if(this.specifications[i].pricePangeList[j].price<minMoney){
                			minMoney = this.specifications[i].pricePangeList[j].price;
                		}
                		if(this.specifications[i].pricePangeList[j].price>maxMoney){
                			maxMoney = this.specifications[i].pricePangeList[j].price;
                		}
                		// console.log('小小：'+minMoney+'    大大：'+maxMoney);
                	}
                }
                if(minPrice!=maxPrice){
                	this.rangePrice = minPrice+'~'+maxPrice;
                }else{
                	this.rangePrice = maxPrice;
                }
                if(minMoney!=maxMoney){
                	this.rangeMoney = minMoney+'~'+maxMoney;
                }else{
                	this.rangeMoney = maxMoney;
                }
                this.showLoading = false;
                let link = window.location.href;
                let img = this.goodsImgs[0];
                this.wxShare(this.good.goodsName, this.good.goodsName, link, img);
            },
            //cart变化的时候重新计算当前商品的数量
            foodNum(item){
                let buyNum = 0;
                for(let spec of item.specifications){
                    if (this.userCart&&this.userCart[item.warehouseCode]&&this.userCart[item.warehouseCode]['goodsList']&&this.userCart[item.warehouseCode]['goodsList'][spec.id]) {
                        buyNum += this.userCart[item.warehouseCode]['goodsList'][spec.id].buyNum;
                    }
                }
                return buyNum;
            },
            specGoodNum(spec){
                let buyNum = 0;
                if (this.userCart&&this.userCart[this.good.warehouseCode]&&this.userCart[this.good.warehouseCode]['goodsList']&&this.userCart[this.good.warehouseCode]['goodsList'][spec.id]) {
                    buyNum += this.userCart[this.good.warehouseCode]['goodsList'][spec.id].buyNum;
                    return buyNum;
                }else {
                    return 0;
                }
            },
            //根据购买数量和价格区间，返回当前购买数量时的价格。
            goodsPrice(priceRange, buyNum){
                let price = 0;
                let priceList = JSON.parse(priceRange);
                for(let i=0; i<priceList.length; i++){
                    if(buyNum >= priceList[i].num){
                        price = priceList[i].price;
                    }
                }
                return price;
            },
            addCart(spec){
            	this.rangePrice = spec.currentPrice;
                let nowBuy = this.specGoodNum(spec);
                if(nowBuy==spec.stock&&nowBuy!=0){
                    this.alertText = '没有更多商品';
                    this.showAlert = true;
                }else if(spec.stock==0){
                    this.alertText = '商品无库存';
                    this.showAlert = true;
                }else if(spec.stock<spec.pricePangeList[0].num&&spec.stock!=0){
                    this.alertText = '商品库存不足起订数量';
                    this.showAlert = true;
                }else if(spec.isShelves == 0){
                    this.alertText = '商品已下架';
                    this.showAlert = true;
                }else if(nowBuy > (spec.stock - 1)){//超出库存
                    this.alertText = '仅剩' + spec.stock +'件';
                    this.showAlert = true;
                }else if(spec.purchaseLimit != 0 && nowBuy > (spec.purchaseLimit - 1)){//超出购买上限
                    this.alertText = '限购' + spec.purchaseLimit +'件';
                    this.showAlert = true;
                }else{
                    this.ADD_CART({
                        userId: this.userInfo.id, 
                        warehouseCode: this.good.warehouseCode, 
                        mechanismName: this.good.mechanismName, 
                        startSendNum: this.good.startSendNum?this.good.startSendNum:'', 
                        goodsClassNum: this.good.goodsClassNum?this.good.goodsClassNum:'', 
                        deliveryMinAmount: this.good.deliveryMinAmount?this.good.deliveryMinAmount:'', 
                        specificationId: spec.id, 
                        specificationName: spec.name, 
                        gooodsId: spec.goodsId, 
                        goodsName: this.good.goodsName, 
                        purchaseLimit: spec.purchaseLimit, 
                        stock: spec.stock, 
                        goodsImg: this.good.goodsImgs?this.good.goodsImgs[0]:defaultImg, 
                        priceRange: spec.priceRange, 
                        promotionId: this.good.promotionId?this.good.promotionId:0, 
                        isFullRe: this.good.isFullCut, 
                        isSupVou: this.good.supportCoupon, 
                        goodsCheck: ''
                    });
                    //起订量大于购买量或者购买量为0时，增加起订量数量。否则增加1.
                    if(spec.pricePangeList[0].num>nowBuy||nowBuy==0){
                        this.currentNum+=spec.pricePangeList[0].num;
                    }else{
                        this.currentNum++;
                    }
                    this.rangeMoney = this.goodsPrice(spec.priceRange, this.specGoodNum(spec));
                }  
            },
            minusCart(spec){
            	let nowBuy = this.specGoodNum(spec);
            	if(nowBuy==0){
            		this.rangeMoney = spec.pricePangeList[0].price;//购买量为零时，批发价默认为第一个阶梯价格
            		return;//购买量为0时返回。
            	}
            	//减少数量=最小起订量时，减少起订量数量。否则减1.
            	if(spec.pricePangeList[0].num==nowBuy){
                	this.currentNum-=spec.pricePangeList[0].num;
                }else{
                	this.currentNum--;
                }
            	this.rangePrice = spec.currentPrice;
            	this.referencePrice = spec.pricePangeList[0].price;
                if (this.specGoodNum(spec) > 0) {
                    this.REDUCE_CART({
                        userId: this.userInfo.id, 
                        warehouseCode: this.good.warehouseCode, 
                        specificationId: spec.id,
                        priceRange: spec.priceRange
                    });
                } 
            	this.rangeMoney = this.goodsPrice(spec.priceRange, this.specGoodNum(spec));
            	if(this.rangeMoney==0){
            		this.rangeMoney = spec.pricePangeList[0].price;
            	}
            },
            toTel(){
            	window.location.href="tel:0371-55525080";
            },
            toCategoryGoods(){
                this.$router.push({path: '/goodsList', query: {flag:5,key:this.good.categoryId,plevel:2}});
            }
        }
    }
</script>

<style lang="less">
    .carousel{
        width: 100%;
        background: $bgColor;
        .carousel-indicators {
            position: absolute;
            height: .14rem;
            bottom: .2rem;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 0;
            line-height: 0;
        }
        .carousel-item div{
            width: 100%;
            height: 100%;
        }
        .carousel-item div img{
            width: 100%;
        }
        .carousel-dot{
            width: .14rem;
            height: .14rem;
            margin: 0 .14rem;
            background: rgba(233,233,233,1);
            border-radius: .07rem;
            font-size: 0;
            line-height: 0;
            overflow: hidden;
        }
        .carousel-dot.active{
            background: rgba(233,233,233,.4);
        }
    }
</style>
<style lang="scss" scoped>
   .info_page{background:#f4f4f4;}
   span{font-style:normal;}
   em{font-style:normal;}
   .banner img{width:100%;}
   .info_page .contain{padding:0 .2rem;background:#fff;}
   .info_page .name{font-size:.32rem;}
   .info_price{color:#ffa101;font-size:.3rem;margin-top:.2rem; margin-right: .2rem;}
   .info_price span{color:#ffa101;}
   .info_buy div{color: #999;}
   .info_buy span{color:#666;}
   .info_price span.money{font-size: .38rem;}
   .zz_btn{font-size:.26rem; width:1.6rem;height:.6rem;line-height:.6rem;text-align: center;background:#ffa101;color:#fff;border-radius:.05rem;}
   .info_price_pf{font-size:.26rem;color:#ffa101;margin-top:.3rem;}
   .info_price_sm>div{width:50%;font-size:.26rem;color:#999;margin-top:.16rem;}
   .info_page .gg .title{font-size:.26rem;color:#999;margin-top:.6rem;}
   .info_page .gg ul{font-size:.28rem;color:#333;margin-top:.4rem;}
   .info_page .gg ul li{margin-bottom:.3rem;}
   .info_page .gg ul li:last-child{margin-bottom:0;padding-bottom:.3rem;}
   .info_page .gg ul li .left{font-size:.26rem;color:#999;}
   .jj_btn.right{text-align: center;}
   .jj_btn.right span{display:block;float:left; width:.5rem;border:1px solid #d8d8d8; line-height:.5rem;font-size:.28rem;}
   .jj_btn.right span:active{background:#efefef;}
   .jj_btn.right span:first-child{border-radius:3px 0 0 3px;}
   .jj_btn.right span:last-child{border-radius:0 3px 3px 0;}
   .jj_btn.right em{display:block;float:left;width:.6rem;border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;}
   .jj_btn.right em input{display:block;width:100%;font-size:.28rem; line-height:.5rem;text-align: center;}
   .goods_commodity{margin-top:.25rem;padding-top:.34rem;background:#fff;}
   .goods_commodity .title{width:2.62rem;margin:0 auto;position:relative;height:.32rem;text-align: center; margin-bottom: .4rem;}
   .goods_commodity .title h2{position:absolute;width:1.46rem;top:0; left:50%;margin-left:-.72rem; height:100%;line-height:.32rem;font-size:.32rem;z-index:2;background:#fff;}
   .goods_commodity .title hr{-webkit-margin-before:0;-webkit-margin-after:0;position:absolute;top:50%;z-index:0; height:.01rem;border-top:.01rem solid #999;width:100%;left:0;}
   .goods_commodity .contain p{font-size:.26rem;color:#999;line-height:.5rem;}
   .goods_commodity img{width: 100%; float: left; font-size: 0; line-height: 0;}
   .no_relation h2{font-size:.26rem;color:#999;}
   .no_relation .box{padding:.5rem 0 .36rem 0;font-size:.26rem;}
   .no_relation .box div{width:50%;text-align: center;line-height:.46rem;color:.26rem;color:#ffa101;}
   .no_relation .box div img{width:.32rem;margin-right:.14rem;vertical-align:-.07rem;}
   .no_relation .box div.right{border-left:.01rem solid #c8c8c8;}
</style>

